<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单表单验证</title>
</head>
<body>
    
    <h1>用户注册</h1>

    <hr>

    <form onsubmit="return checkForm()">
        <div>
            <label>账号：<input id="username" type="text"></label>
        </div>
        <br>
        <div>
            <label>密码：<input id="password" type="password"></label>
        </div>
        <br>
        <div>
            <label>性别：</label>
            <label>男<input type="radio" name="gender" checked></label>
            <label>女<input type="radio" name="gender"></label>
        </div>
        <br>
        <div>
            <label>手机：<input id="mobile" type="text"></label>
        </div>
        <br>
        <div>
            <label>邮箱：<input id="email" type="text"></label>
        </div>
        <br>
        <div>
            <label>学历：
                <select name="" id="edu">
                    <option value="0">请选择</option>
                    <option value="1">大专</option>
                    <option value="2">本科</option>
                    <option value="3">硕士</option>
                    <option value="4">博士</option>
                </select>
            </label>
        </div>
        <br>
        <div>
            <label>地址：<textarea name="" id="address" cols="30" rows="5"></textarea></label>
        </div>
        <br>
        <div>
            <label>爱好：</label>
            <label>游泳<input type="checkbox" name="hobbies" value="游泳"></label>
            <label>旅游<input type="checkbox" name="hobbies" value="旅游"></label>
            <label>爬山<input type="checkbox" name="hobbies" value="爬山"></label>
        </div>
        <br>
        <div>
            <button>确定并提交</button>
            <input type="reset" value="清空">
        </div>
    </form>

    <script>
        var checkForm = function() {
            // 用户名
            var username = $('username');
            if (username.value == '') {
                alert('用户名不能为空！');
                return false;
            }
            if (username.value.length < 6) {
                alert('用户名长度必须大于等于6位');
                return false;
            }
            // 密码...
           var password = $('password');
            var passwordRG = /^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
            if (!passwordRG.test(password.value)) {
                alert('请输入正确的密码！')
                return false;
            }
            
            // 手机
            var mobile = $('mobile');
            var mobileRG = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (!mobileRG.test(mobile.value)) {
                alert('请输入正确的手机号！');
                return false;
             }

            // 邮箱  
            var email = $('email');
            var emailRG = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            if (!emailRG.test(email.value)) {
                alert('请输入正确的邮箱！');
                return false;
            }
            //学历
            var edu = $('edu');
            if (edu.value == 0) {
                alert('请选择学历！');
                return false;
            }

            //地址
             var address = $('address');
            if (address.value == "") {
                alert('请输入你的地址！');
                return false;
            }

            // 爱好
            var hobbies = document.getElementsByName('hobbies');
            var hbArr = [];
            for (var i=0; i<hobbies.length; i++) {
                if (hobbies[i].checked) {
                    hbArr.push(hobbies[i].value);
                }
            }
            if (hbArr.length == 0) {
                alert('请选择你的爱好！');
                return false;
            }
            // console.log(hbArr)
            alert('表单提交成功！');
            return false;
        };
        function $(id) {
            if (typeof id == 'string') {
                return document.getElementById(id);
            } else {
                return id;
            }
        }
    </script>

</body>
</html>